body, ul, li, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    
}

a {
    text-decoration: none !important;
    color: #000;
}

ul {
    list-style: none;
}
html {
    font-size: 100px;
}


.bg {
    background: #141E30; /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #243B55, #141E30); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    width: 100%;
    height: 786px;
}

.pic_box{
    position:absolute;
    float:left;
    width:450px;
    height:520px;
    list-style:none;
    background-color:#ccc;
    left:250px;
    top:150px;
    overflow:hidden;
}

.pic{
    margin:0;
    padding:0;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    transition:0.5s transform ease-in-out;
}

.pic>img{
    width:100%;
    height:100%;
    box-shadow: 10px 10px 10px;
}

.pic:nth-of-type(1){
    left:0%;
}
.pic:nth-of-type(2){
    left:100%;
}
.pic:nth-of-type(3){
    left:200%;
}

input[type="radio"]{
    position:relative;
    z-index:100;
    display:none;
}

.show{
    position:absolute;
    width:100%;
    bottom:-5px;
    text-align:center;
}

.show label{
    display:inline-block;
    width:10px;
    height:10px;
    background-color:aliceblue;
    border-radius:50%;
    margin:0 3px;
    border:2px solid aliceblue;
}

.pic_box input[type="radio"]:nth-of-type(1):checked~.show label:nth-of-type(1){
    background-color:#333;
}

.pic_box input[type="radio"]:nth-of-type(2):checked~.show label:nth-of-type(2){
    background-color:#333;
}

.pic_box input[type="radio"]:nth-of-type(3):checked~.show label:nth-of-type(3){
    background-color:#333;
}

.pic_box input[type="radio"]:nth-of-type(1):checked~.pic{
    transform:translateX(0%);
}
.pic_box input[type="radio"]:nth-of-type(2):checked~.pic{
    transform:translateX(-100%);
}
.pic_box input[type="radio"]:nth-of-type(3):checked~.pic{
    transform:translateX(-200%);
}

.txt_box{
    background-color:transparent;
    position:absolute;
    width:700px;
    height:520px;
    left:850px;
    float:left;
    top:150px;
    color:white;
}

.txt_box>h3{
    font-size:30px;
}

.txt_box>h4{
    margin-top:25px;
    font-size:15px;
    font-family:'Times New Roman', Times, serif;
}

input{    
    display: block;
    margin-top:5px;
    font-size:30px;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #bbbbbb;
    border: 0;
    color:white;
    background-color:transparent;
}

.radio_box{
    background-color:transparent;
    position:inherit;
    left:0;
    top:100px;
    width:700px;
    height:100px;
    color:white;
}


.radio_box label{
    cursor:pointer;
}

.radio_box input{
    display:block;
    top:-30px;
    display:none;
}

.radio_box label input+span{
    padding:15px 30px;
    font-size:30px;
    border-radius:90px;
}

.radio_box label input+span:hover{
    color:#ccc;
    background-color:white;
}

.radio_box label input:checked+span{
    color:black;
    background-color:white;
}

.txt_box>.price{
    font-weight:bold;
    margin-top:130px;
    font-size:30px;
}

.txt_box>.introduce{
    font-weight:normal;
    margin-top:50px;
    font-size:15px;
}

.txt_box>.button{
    margin-top:-30px;
    margin-left:100px;
}

button{
    height:60px;
    width:200px;
    margin:0 35px;
    border-radius:50px;
    border:none;
    outline:none;
    background:white;
    color:black;
    font-size:20px;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
}

button:hover{
    color:white;
    background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size:400%;
}

button:before{
    content:'';
    position:absolute;
    background:inherit;
    top:-5px;
    right:-5px;
    bottom:-5px;
    left:-5px;
    border-radius:50px;
    filter:blur(20px);
    opacity:0;
    transition: opacity 0.5s;
}

button:hover:before{
    opacity:1;
    z-index:-1;
}

button:hover{
    z-index:1;
    animation: glow 8s linear infinite;
}

@keyframes glow{
    0%{
        background-position:0%;
    }
    100%{
        background-position:400%;
    }
}

.foot4{
	margin-top:-5px;
    margin-bottom:-5px;
    padding-top:700px;
    padding-bottom:10px;
}
.foot4 p {
	text-align: center;
	font-size: 5px;
	color: white;
}